<template>
    <div>
        <Row>
            <Menu mode="horizontal" :theme="'light'" :active-name="activeName" @on-select="onSelect">
                <Submenu name="1">
                    <template slot="title">
                        <Icon type="stats-bars"></Icon>
                        监督学习
                    </template>
                    <Menu-item name="KNearestNeighbor"> k-NearestNeighbo </Menu-item>
                </Submenu>
                <Submenu name="2">
                    <template slot="title">
                        <Icon type="stats-bars"></Icon>
                        非监督学习
                    </template>
                    <Menu-item name="KMeans" >K-means</Menu-item>
                </Submenu>
                <Submenu name="3">
                    <template slot="title">
                        <Icon type="stats-bars"></Icon>
                        半监督学习
                    </template>
                </Submenu>
            </Menu>
        </Row>
        <Row>
            <div class="container" >
                <pre>
                    <code v-html="htmlCode">
                    </code>
                </pre>
            </div>
        </Row>
    </div>
</template>
<script>
    import KNearestNeighbor from '@/common/kNearestNeighbor'
    import KMeans from '@/common/kMeans'
    import Prism from 'prismjs';
    export default {
        name: "home",
        data () {
            return {
                htmlCode: null,
                activeName: ""
            }
        },
        mounted() {
            let algorithmName = this.$route.params.algorithmName 
            ? this.$route.params.algorithmName : 
            'KNearestNeighbor';

            this.activeName = algorithmName;
            this._display(algorithmName);
        },
        methods: {
            _display(algorithmName) {
                switch(algorithmName) {
                    case 'KNearestNeighbor':
                        this.htmlCode = Prism.highlight(
                            (new KNearestNeighbor).getCode(),
                            Prism.languages.javascript
                        );
                    break;
                    case 'KMeans':
                        this.htmlCode = Prism.highlight(
                            (new KMeans).getCode(),
                            Prism.languages.javascript
                        );
                    break;
                }
            },

            onSelect(algorithmName) {
                setTimeout(()=>{
                    this.$router.push({
                        name: 'Home', 
                        params: {
                            algorithmName: algorithmName
                        }
                    });
                }, 100);
            }
        },
        beforeRouteUpdate (to, from, next) {
            this._display(to.params.algorithmName);
            next();
        }
    }
</script>
<style scoped>
    .container {
        padding: 20px;
    }
    pre {
        border-radius: 3px;
        border: 1px solid #e1e4e8;
        padding: 20px;
    }
</style>